<template>
    <div class="login-container">
        <div class="background-container">
            <el-card class="login-card">
                <img src="../assets/imagewhite.png" style="width: 100px;height: auto;">
                <h1 class="title">欢迎使用</h1>
                <el-form :model="loginParam" ref="loginParam" label-position="left" label-width="100px"
                    class="form-container">
                    <el-form-item label="用户名">
                        <el-input v-model="loginParam.account_number" placeholder="请输入用户名" class="input-box"
                            id="username-input" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="loginParam.account_password" placeholder="请输入密码"
                            class="input-box" id="password-input" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="button-login" @click="submitForm()"
                            aria-label="Login Button">登录</el-button>

                    </el-form-item>
                    <!-- {{loginParam.account_number}}
                    {{loginParam.account_password}} -->
                </el-form>


                <div class="other-elements">

                </div>

                <div class="contact-container">
                    <p>需要帮助？请联系我们的客服：电话：400-666-8888 | 邮箱：help@campusgang.com</p>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginParam: {},
                Account: [],
            };
        },
        methods: {
            submitForm() {
                this.$axios
                    .post('account/login', this.loginParam)
                    .then(response => {
                        let result = response.data;
                        if (result == '登录成功') {
                            this.$message({
                                message: result,
                                type: 'success'
                            });

                            // 获取账户信息并在获取完毕后执行逻辑
                            this.getAccountByNumber(this.loginParam.account_number)
                                .then(() => {
                                    if (this.Account[0].account_type === 2) {
                                        this.$router.push({
                                            path: '/index',
                                            query: {
                                                account_number: this.loginParam.account_number
                                            }
                                        });
                                    } else if (this.Account[0].account_type === 1) {
                                        this.$router.push({
                                            path: '/business',
                                            query: {
                                                account_number: this.loginParam.account_number
                                            }
                                        });
                                    }else{
                                        this.$router.push({
                                            path: '/student',
                                            query: {
                                                account_number: this.loginParam.account_number
                                            }
                                        });
                                    }

                                    // 清空登录参数对象
                                    this.loginParam = {};
                                })
                                .catch(err => {
                                    alert(err);
                                });
                        } else {
                            this.$message({
                                message: result,
                                type: 'error'
                            });
                        }
                    })
                    .catch(err => {
                        alert(err);
                    });
            },
            getAccountByNumber(account_number) {
                return this.$axios
                    .get('account/getAccountByNumber?account_number=' + account_number)
                    .then(response => {
                        this.Account = response.data;
                    })
                    .catch(err => {
                        alert(err);
                    });
            },
        }
    };
</script>

<style scoped>
    .login-container {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /*以下两种路径方式都可以*/
        /*background-image: url('../../../../assets/images/logo.png');*/
        background-image: url(../assets/demobg.jpg);
        background-size: cover
    }

    .background-container {
        /* background-color: #f2f6fc; */
        padding: 50px;
        border-radius: 20px;
    }

    .login-card {
        margin-top: -200px;
        width: 450px;
        border-radius: 20px;
        /* box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); */
    }

    .title {
        font-size: 32px;
        text-align: center;
        margin-top: 40px;
    }

    .input-box {
        margin-left: -40px;
    }

    .form-container {
        margin-top: 40px;
        padding: 0 30px 30px 30px;
    }

    .button-login {
        margin-left: -40px;
        width: 100%;
        background: #00a651;
        border-color: #00a651;
        color: #fff;
    }

    .other-elements {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .text {
        font-size: 24px;
    }

    .button {
        width: 100px;
    }

    
</style>